import React from 'react';
import './home.scss';
import { api } from 'js/api/api';
import { browserHistory } from 'react-router';
import { userData } from 'js/core/userData';
import Progress from 'views/component/progress/progress';
import Button from 'views/component/button/button';
import { panelPop } from 'views/modal/panelPop/panelPop';
import { homePop } from './component/homePop';
import Pickup from './component/pickup';
import Build from './component/build';
import ToolTable from './component/toolTable';
import { observer, inject } from 'mobx-react';

@inject('playerStore')
@observer
class Home extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            selectBuildingId: null
        }
    }
    componentDidMount() {

    }
    investigate = () => {
        let player = this.props.playerStore.player;
        let query = { mainTaskId: 0 };
        if (player.basicInfo.mainTaskId < 7) {
            query = { mainTaskId: player.basicInfo.mainTaskId };
        }
        api('homeInvestigate', query, (err, data) => {
            if (err === 0) {
                if (data && data.log) {
                    window.eventHandle.emit('log', data.log);
                }
                this.setState({})
            }
        })
    }
    selectBuilding = (buildingId) => {
        this.setState({ selectBuildingId: buildingId })
    }
    build = () => {
        homePop.showModal(<Build complete={() => { this.setState({}) }} />);
    }
    changeMap = () => {
        api('changeMap', { mapType: 4 }, (err, data) => {
            if (err === 0) {
                if (data && data.log) {
                    window.eventHandle.emit('log', data.log);
                }
                this.setState({})
                browserHistory.push('/map')
            }
        })
    }
    openFunction = (homeBuildingId) => {
        let baseConfig = window.totalConfig.base;
        if (homeBuildingId === baseConfig.toolTableBuildingId) {
            homePop.showModal(<ToolTable complete={() => { this.setState({}) }} />);
        }
    }
    render() {
        let { selectBuildingId } = this.state;
        let totalConfig = window.totalConfig, propName = window.propName;
        let player = this.props.playerStore.player;
        let basicInfo = player.basicInfo
        let homeInfo = player.homeInfo;
        let homeBuilding = homeInfo.homeBuilding;
        let buildingNode = [], homeBuildingNode = [];
        let homeBuildingConfig = totalConfig.homeBuilding;

        for (let [key, value] of Object.entries(homeInfo.building)) {
            if (value.hide !== true) {
                buildingNode.push(<Button onClick={() => { this.selectBuilding(parseInt(key)) }} key={key}>{propName[key]}</Button>)
            }
        }
        for (let [homeBuildingId, value] of Object.entries(homeInfo.homeBuilding)) {
            let buildlvl = homeInfo.homeBuilding[homeBuildingId].lvl;
            let buildingInfo = homeBuildingConfig[homeBuildingId].lvlUp[buildlvl];
            if (value.hide !== true && parseInt(homeBuildingId) !== 170009) {
                if (homeBuildingConfig[homeBuildingId].homeInner !== false) {
                    homeBuildingNode.push(<Button key={homeBuildingId} onClick={() => { this.openFunction(parseInt(homeBuildingId)) }}>
                        {buildingInfo.name}</Button>)
                } else {
                    buildingNode.push(<Button key={homeBuildingId}>{buildingInfo.name}</Button>)
                }
            }
        }
        return (
            <div id="home" className="flex-col">
                <div className="buildContent flex-col  flex-g-1">
                    <div className="house flex-center">
                        <div className={"house-inner flex ac-start wrap " + (homeBuilding[170009] ? 'showHouse' : '')}>
                            {homeBuilding[170009] && <div className="house-title">{propName[170009]}</div>}
                            {homeBuildingNode}
                        </div>
                    </div>
                    <div className="flex">
                        <div className="flex building ac-start wrap">
                            {buildingNode}
                        </div>
                        {selectBuildingId && <div className="buildingDesc">
                            <Pickup buildingId={selectBuildingId} complete={() => { this.setState({}) }} />
                        </div>}
                    </div>
                </div>
                <div className="flex-vcenter home-bottom ">
                    <div className="flex-g-1 flex-center">{homeInfo.build === true && <Button onClick={() => { this.build() }}>建造</Button>}</div>
                    <div className="flex-g-1 flex-center"><Progress onEnd={this.investigate}>探索</Progress></div>
                    <div className="flex-g-1 flex-center">{homeBuilding[170009] && <Button onClick={this.changeMap}>出发</Button>}</div>
                </div>
            </div>
        )
    }
}

export default Home;